<template>
  <div ref="container" class="Business text-white">
    <div v-if="token" class="edit-view">
      <div v-if="openEdit === 0" class="btn" @click="openEditFun(1)">
        打开编辑
      </div>
      <div v-else class="btn" @click="closeEdit">取消编辑</div>
      <div v-if="openEdit === 1" class="btn yu" @click="openEdit = 2">
        预览效果
      </div>
      <div v-if="openEdit === 2" class="btn yu" @click="openEditFun(1)">
        继续编辑
      </div>
      <div v-if="openEdit !== 0" class="btn save" @click="EidtPageIndexInfoFun">
        保存编辑
      </div>
    </div>
    <div class="home-video">
      <video
        v-if="silibInfo && silibInfo.PicPath"
        class="home-video"
        ref="video"
        autoplay
        loop
        :muted="muted"
        :src="silibInfo.PicPath"
      ></video>
      <icons @click="playPause" class="icon a" :name="play ? 'bof' : 'zant'" />
      <icons
        @click="muted = !muted"
        class="icon b"
        :name="!muted ? 'yinl' : 'jiny'"
      />
      <div v-if="isEdit" class="btn-view">
        <div class="btn">
          上传首页视频
          <input type="file" @change="handleFileUpload" accept="video/mp4" />
        </div>
      </div>
    </div>
    <div class="nav-list-view">
      <div v-if="isEdit" class="add-btn">
        <icons class="icon" name="jiahao" />
        <input type="file" @change="handleFileUpload($event, 'icon')" />
      </div>
      <div v-for="(info, i) in silibInfo.LogoInfo" :key="info.Id" class="nav">
        <div v-if="isEdit" class="btn" @click="deleteItem(i)">x</div>
        <img :src="info.PicPath" alt="" />
      </div>
    </div>
    <div
      v-for="(item, i) in silibInfo.Sleep"
      :key="item.Id"
      class="content-view"
    >
      <div
        v-if="i % 2 === 0"
        class="card-text-view"
        @click="toPage('/sdetail/' + item.Id)"
      >
        <div class="card-item text" :style="contentStyle">
          <div class="tag">{{ item.TypeName }}</div>
          <div class="title">{{ item.title }}</div>
          <div class="desc">
            {{ item.desc }}
          </div>
          <div class="next-step">
            <div class="text">阅读更多</div>
          </div>
        </div>
        <div class="card-item img" :style="contentStyle">
          <img :src="item.LargePicA" alt="" />
        </div>
      </div>
      <div v-else class="card-text-view" @click="toPage('/sdetail/' + item.Id)">
        <div class="card-item img">
          <img :src="item.LargePicA" alt="" />
        </div>
        <div class="card-item text">
          <div class="tag">{{ item.TypeName }}</div>
          <div class="title">{{ item.title }}</div>
          <div class="desc">
            {{ item.desc }}
          </div>
          <div class="next-step">
            <div class="text">阅读更多</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ling-view">
      <div class="title">灵感，交付</div>
      <div class="sub">INSPIRATION, DELIVERED.</div>
      <div class="desc">奢华睡眠方案</div>
      <div class="btn" @click="showWin = true">接触</div>
      <div class="text">
        全球800+高端服务式公寓、酒店、名宿的选择。<br />
        ab可以开发特殊尺寸和颜色，并根据您的要求和偏好定制。
      </div>
    </div>
  </div>
  <div v-if="showWin" class="transparent-bg" @click="showWin = false">
    <div class="white-bg" @click.stop="">
      <div class="touch">接触</div>
      <div class="touch-tit">
        我们确定可以通过睡眠来获得更好的健康、情绪、表现和寿命。ANGIEBENNY
        寝具可保持理想的睡眠温度 让我们睡得更久、更深，从而帮助我们睡得更好。
      </div>
      <div class="touch-tit2">
        We can literally sleep ourselves to a better health, mood, performance
        and longevity.ANGIEBENNY bedding helps us to sleep better by keeping the
        ideal sleeping temperature for a longer and deeper sleep.
      </div>
      <div class="connect-box">
        <div class="connect-left">
          <div class="left-list">
            <img class="img" src="../../assets/image/address.png" alt="" />
            <div>
              <div class="address">ANGIEBENNY 展厅</div>
              <div>上海市佳通路31弄5号中冶翔腾城市广场</div>
              <div>上海市嘉定区惠亚路1号（山姆超市）</div>
            </div>
          </div>
          <div class="left-list">
            <img class="img2" src="../../assets/image/dianhua.png" alt="" />
            <div>
              <div class="phone">+86 189 1795 3992</div>
              <div>永远为您服务 Always here for you</div>
            </div>
          </div>
        </div>
        <div class="connect-girht">
          <img class="img" src="../../assets/image/youxiang.png" alt="" />
          <div>
            <div class="sales">售后服务</div>
            <div>AfterSales@angibenny.com</div>
            <div class="market">市场和营销</div>
            <div>marksting@angibenny.com</div>
            <div>marksting Li@angibenny.com</div>
            <div class="hr">HR</div>
            <div>people@angibenny.com</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Cookies from "js-cookie";
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  EidtCommercialCustomer,
  GetCommercialCustomer,
  UploadFile,
} from "@/server";
const router = useRouter();
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const token = Cookies.get("token");
const showWin = ref(false);
const openEdit = ref(0);
const closeEdit = () => {
  openEdit.value = 0;
};
const muted = ref(true); //静音
const play = ref(true); //静音
const video = ref(null) as any;
const playPause = () => {
  const v = video.value;
  // 如果视频正在播放，暂停它；否则，播放它。
  if (v.paused) {
    v.play();
    play.value = true;
  } else {
    v.pause();
    play.value = false;
  }
};
const silibInfo = ref({}) as any;
const isEdit = computed(() => openEdit.value === 1);
const container = ref<HTMLElement | null>(null);
const contentStyle = ref({ width: "50%", height: "50%" });
const openEditFun = (n: number) => {
  openEdit.value = n;
};

const handleFileUpload = async (event: any, type?: string) => {
  const file = event.target.files[0];
  let newimgdata = URL.createObjectURL(file);
  const fd = new FormData();
  fd.append("file", file);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    if (type === "icon") {
      silibInfo.value.LogoInfo.push({
        Pic: FileName,
        PicPath: newimgdata,
      });
    } else {
      silibInfo.value.Pic = FileName;
      silibInfo.value.PicPath = newimgdata;
    }
  } else {
    store.error(res.Message); // 错误提示
  }
};
const deleteItem = (i: number) => {
  silibInfo.value.LogoInfo.splice(i, 1);
};
const EidtPageIndexInfoFun = async () => {
  const res: any = await EidtCommercialCustomer({
    Pic: silibInfo.value.Pic,
    LogoInfo: silibInfo.value.LogoInfo,
    Operator: token,
  });
  if (res.Tag === 1) {
    GetCommercialCustomerFun();
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const GetCommercialCustomerFun = async () => {
  const res: any = await GetCommercialCustomer({});
  if (res.Tag === 1) {
    const list = res.Data.Sleep.map((e: any) => {
      if (e.TypeName === "原材料") {
        e.title = "我们的材料";
        e.desc = "800+全球最优质的原材料供应商，直接从源头为您带来卓越的品质。";
      } else if (e.TypeName === "工艺") {
        e.title = "一脉相承，无限可能";
        e.desc = "融合意大利精湛的工艺，并增添定制的奢华和乐趣。";
      } else if (e.TypeName === "创新") {
        e.title = "设计与创新";
        e.desc = "我相信幸福就在于细节，微妙的触感决定了精致与精湛的区别。";
      } else if (e.TypeName === "睡眠") {
        e.title = "舒适和优雅";
        e.desc = "您的客人就是我们的客户，我们的使命是：帮助您提升他们的体验。";
      } else if (e.TypeName === "我们在行动") {
        e.title = "环保";
        e.desc = "我们的承诺成为最负责任的自己，并始终意识到我们的影响。";
      }
      return e;
    });
    silibInfo.value = res.Data;
    silibInfo.value.Sleep = list;
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetCommercialCustomerFun();
const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const w = containerWidth / 2;
    contentStyle.value = { width: w + "px", height: w + "px" };
  }
};
/**
 * @description: 页面跳转实例
 * @param {*} url
 * @return {*}
 * @author: cool panda
 */
const toPage = (url: string) => {
  window.open(url, "_blank");
};
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.Business {
  width: 100%;
  min-height: 100vh;
  .home-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .btn-view {
      position: absolute;
      .btn {
        position: relative;
        input {
          cursor: pointer;
          position: absolute;
          opacity: 0;
          width: 100%;
          height: 100%;
        }
        &:hover {
          opacity: 1;
        }
        transition: opacity 0.3s;
        opacity: 0.8;
        cursor: pointer;
        border-radius: 4px;
        min-width: 200px;
        padding: 0 20px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
        background: #cd3755;
      }
    }
  }
  .nav-list-view {
    margin: 50px 0;
    display: flex;
    justify-content: center;
    .add-btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 42px;
      width: 42px;
      color: #ffffff;
      background-color: #000000;
      input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
      }
      .icon {
        width: 15px;
        height: 15px;
      }
    }

    .nav {
      position: relative;
      margin: 0 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0;
        top: 0;
        background: #000000;
        color: #ffffff;
      }
      img {
        height: 24px;
        object-fit: contain;
      }
    }
  }
  .content-view {
    .card-text-view {
      display: flex;
      .card-item {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        &.text {
          padding: 0 7%;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .tag {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #777777;
          margin-bottom: 10px;
        }
        .title {
          font-size: 42px;
          font-family: PingFangSC-Light, PingFang SC;
          font-weight: 300;
          color: #000000;
          line-height: 78px;
          letter-spacing: 1px;
        }
        .desc {
          text-align: left;
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 32px;
        }
        .next-step {
          width: 100%;
          margin-top: 36px;
          display: flex;
          justify-content: space-between;
          .text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: bold;
            color: #000;
            line-height: 22px;
          }
        }
      }
    }
  }
  .ling-view {
    height: 650px;
    background: #f6f6f6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 56px;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: #000000;
      line-height: 78px;
      letter-spacing: 1px;
    }
    .sub {
      font-size: 27px;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: #000000;
      line-height: 38px;
    }
    .desc {
      margin-top: 47px;
      margin-bottom: 16px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #777777;
      line-height: 20px;
    }
    .btn {
      &:hover {
        color: #000;
        background: #ffffff;
        border: 1px solid #979797;
      }
      cursor: pointer;
      transition: 0.3s all;
      margin-bottom: 27px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 419px;
      height: 60px;
      border: 1px solid #000000;
      background: #000000;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
    }
    .text {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 30px;
    }
  }
}
.transparent-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: 10000;
  .white-bg {
    user-select: all;
    background: #fff;
    color: #000;
    text-align: left;
    width: 64%;
    min-width: 1100px;
    max-width: 1346px;
    margin: 0 auto;
    padding: 36px 40px;
    .touch {
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    .touch-tit {
      font-size: 14px;
      width: 70%;
    }
    .touch-tit2 {
      margin-top: 18px;
      font-size: 14px;
      width: 72%;
      margin-bottom: 50px;
    }
    .connect-box {
      width: 80%;
      display: flex;
      font-size: 13px;
      .connect-left {
        flex: 1;
        line-height: 24px;
        .left-list {
          display: flex;
          margin-bottom: 35px;
          .address {
            font-weight: bold;
            margin-bottom: 1px;
          }
          img {
            width: 25px;
            height: 24px;
            margin-right: 18px;
            margin-top: 5px;
          }
          .img2 {
            width: 24px;
            height: 24px;
            margin-right: 18px;
            margin-top: 5px;
          }
          .phone {
            font-weight: bold;
          }
        }
      }
      .connect-girht {
        display: flex;
        flex: 1;
        line-height: 24px;
        img {
          width: 24px;
          height: 20px;
          margin-right: 18px;
          margin-top: 5px;
        }
        .sales {
          font-weight: bold;
        }
        .market {
          font-weight: bold;
          margin-top: 12px;
        }
        .hr {
          font-weight: bold;
          margin-top: 12px;
        }
      }
    }
  }
}
</style>
